<template>
	<view class="pages">
		<view class="mar-x-15 font-22 font-b-800">
			<text class="dis-block">请输入验证码</text>
		</view>
		
		<view class="mar-x-15 font-14 color-999999 mar-t-10">
			<text>验证码已发送至</text>
			<text class="color-333333 mar-l-10">{{ getMobile() }}</text>
		</view>
		
		<view class="flex align-center mar-x-15 mar-t-60">
			<u-code-input
				v-model="codes"
				:focus="true"
				:maxlength="codeLen"
				hairline
				mode="line" 
				:size="codeSize"
				:space="codeSpace"
				color="#3c9cff"
				border="bottom"
				borderColor="#3c9cff"
				@finish="handleFinish()"
			></u-code-input>
		</view>
		
		<view v-if="!isEndTime" class="flex align-center mar-x-15 color-999999 mar-t-20 font-14">
			<u-count-down ref="countdown" :time="timestamp" format="ss" autoStart millisecond @change="onChange" @finish="onFinish">
				<text class="mar-r-10 mainBlueColor">{{ timeData.seconds }}</text>
			</u-count-down>
			
			<text>秒后重新发送验证码</text>
		</view>
		
		<view v-else class="font-14 mainBlueColor mar-t-20 mar-x-15">
			<text @click="getCaptch()">重新发送验证码</text>
		</view>
	</view>
</template>

<script>
	import Utils from '@/utils/utils'
	import { mapState } from 'vuex'
	import { checkLogin } from '@/utils/lib'
	
	export default {
		computed: {
			...mapState({
				mobile: state => state.user.mobile
			}),
			
			// 将验证的手机号格式化
			getMobile() {
				return () => {
					let mobile = ''
					
					if (this.mobile) {
						let str1 = this.mobile.substring(0, 3)
						let str2 = this.mobile.substring(3, 7)
						let str3 = this.mobile.substring(7, 11)
						
						mobile = str1 + ' ' + str2 + ' ' + str3
					}
					
					return mobile
				}
			}
		},
		
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				
				// 验证码
				codes: '',
				
				// 验证码数量
				codeLen: 4,
				
				// 单个验证码输入框长度
				codeSize: 40,
				
				// 验证码输入框之间的间距
				codeSpace: 10,
				
				// 倒计时
				timeData: {},
				
				// 倒计时时间（60 秒）
				timestamp: 60 * 1000,
				
				// 倒计时是否结束
				isEndTime: false,
			}
		},
		
		destroyed() {
			// 离开页面时，将验证的手机号信息删除
			this.$store.commit('user/setMobile', '')
		},
		
		onShow() {
			this.getSystemInfo()
			checkLogin()
		},
		
		onLoad() {
			// 获取状态栏高度
			this.getStatusBarHeight()
		},
		
		methods: {
			// 获取状态栏高度
			getStatusBarHeight() {
				let info = uni.getSystemInfoSync()
				
				this.statusBarHeight = info.platform === 'android' ? info.statusBarHeight : (info.statusBarHeight + 44)
			},
			
			// 获取系统信息
			getSystemInfo() {
				let info = uni.getSystemInfoSync()
				let sysW = info.windowWidth
				
				// 计算单个验证码长度，30 表示两边留白边距
				this.codeSize = (sysW - 30 - (this.codeLen - 1) * this.codeSpace) / this.codeLen
			},
			
			// 倒计时监听
			onChange(e) {
				this.timeData = e
			},
			
			// 倒计时结束
			onFinish(e) {
				this.codes = ''
				this.isEndTime = true
			},
			
			// 重新获取验证码
			getCaptch() {
				Utils.loading('请求中...')
				
				// 检测手机号是否存在，获取短信验证码
				this.$store.dispatch('user/getSMSCode', this.mobile).then(res => {
					uni.hideLoading()
					Utils.popUpMsg('success', res.Message, 500)
					this.isEndTime = false
					let countdown = this.$refs.$refs
					
					if (countdown) {
						countdown.start()
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
			// 输入完成，校验验证码
			handleFinish() {
				Utils.loading('登录中...')
				
				this.$store.dispatch('user/login', { phone: this.mobile, code: this.codes }).then(res => {
					uni.hideLoading()
					
					// 验证码验证通过，跳转到主页面
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(err => {
					this.codes = ''
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/scss/variable.module.scss";
	
	.pages {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #fff;
	}
	
	.mainBlueColor {
		color: $mainBlueColor;
	}
</style>
